import React, { Component, Suspense } from "react";
import PageLoading from "@/components/PageLoading";
import { GroupBar } from "@/components/Charts";

import { Divider, Tag } from "antd";

const visitData = [
  { x: "2019-11-14", y: 7 },
  { x: "2019-11-15", y: 5 },
  { x: "2019-11-16", y: 4 },
  { x: "2019-11-17", y: 2 },
  { x: "2019-11-18", y: 4 },
  { x: "2019-11-19", y: 7 },
  { x: "2019-11-20", y: 5 },
  { x: "2019-11-21", y: 6 },
  { x: "2019-11-22", y: 5 },
  { x: "2019-11-23", y: 9 },
  { x: "2019-11-24", y: 6 },
  { x: "2019-11-25", y: 3 },
  { x: "2019-11-26", y: 1 },
  { x: "2019-11-27", y: 5 },
  { x: "2019-11-28", y: 3 },
  { x: "2019-11-29", y: 6 },
  { x: "2019-11-30", y: 5 }
];
const IntroduceRow = React.lazy(() => import("./IntroduceRow"));

class DataStatistics extends Component {
  constructor(props) {
    super(props);
    this.state = { timeSelectedTags: [] };
  }
  // 时间选择变化事件
  timeHandleChange = (tag, checked) => {
    const { timeSelectedTags } = this.state;
    const nextSelectedTags = checked ? [...timeSelectedTags, tag] : timeSelectedTags.filter(t => t !== tag);
    console.log(nextSelectedTags);
    this.setState({ timeSelectedTags: nextSelectedTags });
  };
  render() {
    const { timeSelectedTags } = this.state;
    return (
      <div className="dataStatistics">
        {/* 顶部标题模块 */}
        <div className="top-title">整体概况</div>
        {/* 分割线模块 */}
        <Divider style={{ marginTop: 12, marginBottom: 12 }} />
        {/* 时间选择模块 */}
        {/* <div className="tag-select" key="time-select">
          <h6 style={{ marginRight: 8, display: "inline" }}>所属时间:</h6>
          {timeTagsFromServer.map(tag => (
            <CheckableTag key={tag} checked={timeSelectedTags.indexOf(tag) > -1} onChange={checked => this.timeHandleChange(tag, checked)}>
              {tag}
            </CheckableTag>
          ))}
        </div> */}
        {/* 分割线模块 */}
        {/* <Divider dashed /> */}
        {/* 迷你图模块 */}
        <Suspense fallback={<PageLoading />}>
          <IntroduceRow statisticalData={this.props.statisticalData} loading={false} visitData={visitData} />
        </Suspense>
        {/* 中部标题模块 */}
        <div className="top-title">其他数据</div>
        {/* 分割线模块 */}
        <Divider style={{ marginTop: 12, marginBottom: 12 }} />
        {/* 数据类型筛选模块 */}
        {/* <div className="tag-select" key="time-select">
          <h6 style={{ marginRight: 8, display: "inline" }}>数据类型:</h6>
          {timeTagsFromServer.map(tag => (
            <CheckableTag key={tag} checked={timeSelectedTags.indexOf(tag) > -1} onChange={checked => this.timeHandleChange(tag, checked)}>
              {tag}
            </CheckableTag>
          ))}
        </div> */}
        {/* 分割线模块 */}
        {/* <Divider dashed /> */}
        {/* <div>
          <TimeSwitch />
        </div> */}
        <div>
          <GroupBar data={this.props.statisticalData} />
        </div>
      </div>
    );
  }
}

export default DataStatistics;
